<template>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <input class="color-input" type="color" value="#0000ff">
      <img class="color-img" src="/static/9284591662_38b0438418_h.jpg">
    </div>
    <div class="col">
      <input class="color-input" type="color" value="#0000ff">
      <img  class="color-img" src="/static/shaonian.jpg">
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "mixcolor",
  title: "更改颜色",
  data() {
    return {}
  }
}
</script>

<style scoped>
.olor-img {
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.color-input {

  /* removes default styling from input color element */
  padding: 0;
  border: none;
  /* makes input (color swatch) 100% size of container */
  position: absolute;

  width: 90%;
  height: 100%;
  /* mix blend mode makes the color of the swatch alter the image behind it. */
  mix-blend-mode: hue;
  /* try screen, multiply or other blend modes for different effects */
  cursor: pointer;
}

/* removes default styling from input color element */

::-webkit-color-swatch {
  border: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
  border: none;
}

::-moz-focus-inner {
  padding: 0;
}


/* Image Credit */

a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #6B6BFF;
  background: black;
  display: block;
  padding: 0 8px 3px;
  font-size: 15px;
  text-decoration: none;
}
</style>
